<template>
   <view>
      <u-navbar autoBack title="通讯录" fixed placeholder></u-navbar>
      <view class="content">
         <view class="tools">
            <!-- <view class="search-input" @click="goSearch">
               <view class="search-input_wrap">
                  <u-icon name="search"></u-icon>
                  <text class="label">搜索</text>
               </view>
            </view> -->
            <u-tabs :list="list" :current="active" :scrollable="false" lineColor="#0aa679" @change="changeTab"></u-tabs>
         </view>
			<view class="body">
				<swiper :duration="300" :current="active" :style="{height: `calc(100vh - ${top}px)`, overflow: 'hidden'}"
            @change="changeSwiper">
					<swiper-item>
						<z-paging ref="tab1" fixed use-safe-area-placeholder refresher-vibrate refresher-only
                  @query="getClazzMember()" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time>
						   <view class="swiper-item">
   							<Tab1 :data="dataList" />
   						</view>
						</z-paging>
					</swiper-item>
					<swiper-item>
                  <z-paging ref="tab2" fixed use-safe-area-placeholder refresher-vibrate refresher-only
                  @query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
                  @scroll="onScroll2">
						   <view class="swiper-item tab2">
   							<view v-if="dataList2.length != 0">
                           <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
   							   <u-cell v-for="item in dataList2" :key="item.id" :title="item.nickname" @click="goChat(item)">
                              <u-avatar slot="icon" :src="fileUrl + item.avatar" :size="28" style="margin-right: 10px;"></u-avatar>
                           </u-cell>
                           <u-loadmore :status="loadMore2" :marginTop="20" :marginBottom="20" @loadmore="onLoadMore2"></u-loadmore>
   							</view>
                        <u-empty v-else icon="/static/no_data.png" text="暂无关注" :marginTop="50"></u-empty>
   						</view>
						</z-paging>
					</swiper-item>
               <swiper-item>
                  <z-paging ref="tab3" fixed use-safe-area-placeholder refresher-vibrate refresher-only
                  @query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
                  @scroll="onScroll3">
                     <view class="swiper-item tab3">
                        <view v-if="dataList3.length != 0">
                           <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
                           <u-cell v-for="item in dataList3" :key="item.id" :title="item.nickname" @click="goChat(item)">
                              <u-avatar slot="icon" :src="fileUrl + item.avatar" :size="28" style="margin-right: 10px;"></u-avatar>
                           </u-cell>
                           <u-loadmore :status="loadMore3" :marginTop="20" :marginBottom="20" @loadmore="onLoadMore3"></u-loadmore>
                        </view>
                        <u-empty v-else icon="/static/no_data.png" text="暂无粉丝" :marginTop="50"></u-empty>
                     </view>
                  </z-paging>
					</swiper-item>
				</swiper>
			</view>
      </view>
   </view>
</template>

<script>
import Tab1 from './components/tab1'
import {
   clazzMember,
   getAttentionUser,
   getFansUser
} from '@/api/user'
export default {
   components: { Tab1 },
   data() {
      return {
         active: 0,
         list: [
            { name: '班级' },
            { name: '关注' },
            { name: '粉丝' }
         ],
         top: 0,
         dataList: [],
         dataList2: [],
         dataList3: [],
         current2: 1,
         current3: 1,
         loadMore2: 'loadmore',
         loadMore3: 'loadmore',
         contentHeight2: 0,
         contentHeight3: 0
      }
   },
   created() {
      this.getClazzMember()
      this.getAttentDataList(false)
      this.getFansDataList(false)
   },
   mounted() {
      const query = uni.createSelectorQuery().in(this)
      query.selectAll('.swiper-item').boundingClientRect(data => {
         this.top = data[0].top
      }).exec()
   },
   methods: {
      goSearch() {
         uni.navigateTo({
            url: "/pages/tab3/search/search"
         })
      },
      changeTab(tab) {
         this.active = tab.index
      },
      changeSwiper(e) {
         this.active = e.detail.current
      },
      getClazzMember() {
         clazzMember({ id: this.$store.getters.id }).then(res => {
            this.$refs.tab1.complete()
            if(res.code === 200) {
               res.data.sort((a, b) => {
                  if(a.char.localeCompare(b.char) == 0) {
                     return a.id - b.id
                  }
                  return a.char.localeCompare(b.char)
               })
               this.dataList = res.data
            }
         }).catch(() => {
            this.$refs.tab1.complete()
         })
      },
      getAttentDataList(isRefresh) {
         const params = {}
         params.size = 40
         params.current = this.current2
         params.id = this.$store.getters.id
         getAttentionUser(params).then(res => {
            this.$refs.tab2.complete()
            const { code , data } = res
            if(code === 200) {
               this.total = data.total
               if(isRefresh) {
                  this.dataList2 = []
               }
               data.list.forEach(item => {
                  this.dataList2.push(item)
               })
               if(data.total > this.dataList2.length) {
                  this.loadMore2 = 'loadmore'
               }else {
                  this.loadMore2 = 'nomore'
               }
            }
         }).catch(() => {
            this.$refs.tab2.complete()
         })
      },
      getFansDataList(isRefresh) {
         const params = {}
         params.size = 40
         params.current = this.current3
         params.id = this.$store.getters.id
         getFansUser(params).then(res => {
            this.$refs.tab3.complete()
            const { code , data } = res
            if(code === 200) {
               this.total = data.total
               if(isRefresh) {
                  this.dataList3 = []
               }
               data.list.forEach(item => {
                  this.dataList3.push(item)
               })
               if(data.total > this.dataList3.length) {
                  this.loadMore3 = 'loadmore'
               }else {
                  this.loadMore3 = 'nomore'
               }
            }
         }).catch(() => {
            this.$refs.tab3.complete()
         })
      },
      onRefresh(current, size) {
         if(this.active === 1) {
            this.current2 = 1
            this.getAttentDataList(true)
         }else if(this.active === 2) {
            this.current3 = 1
            this.getFansDataList(true)
         }
      },
      onLoadMore2() {
         if(!this.isRequest) {
         this.current2++
         this.getAttentDataList(false)
         }
      },
      onLoadMore3() {
         if(!this.isRequest) {
         this.current3++
         this.getFansDataList(false)
         }
      },
      onScroll2(e) {
         this.getHeight()
         const { deltaY, scrollTop, scrollHeight } = e.target
         if(deltaY < 0 && scrollHeight - this.contentHeight2 - scrollTop < 50 && this.loadMore2 == 'loadmore') {  //向下滑动
            this.timer && clearTimeout(this.timer)
            this.timer = setTimeout(() => {
               this.loadMore2 = 'loading'
               this.onLoadMore2()
            }, 300);
         }
      },
      onScroll3(e) {
         this.getHeight()
         const { deltaY, scrollTop, scrollHeight } = e.target
         if(deltaY < 0 && scrollHeight - this.contentHeight3 - scrollTop < 50 && this.loadMore3 == 'loadmore') {  //向下滑动
            this.timer && clearTimeout(this.timer)
            this.timer = setTimeout(() => {
               this.loadMore3 = 'loading'
               this.onLoadMore3()
            }, 300);
         }
      },
      getHeight() {
         const tab2 = uni.createSelectorQuery().in(this).select('.content')
         tab2.boundingClientRect((info) => {
            this.contentHeight2 = info.height
         }).exec()
         const tab3 = uni.createSelectorQuery().in(this).select('.content')
         tab3.boundingClientRect((info) => {
            this.contentHeight3 = info.height
         }).exec()
      }
   },
}
</script>

<style lang="scss" scoped>
   .tools {
      background-color: #fff;
      
      .search-input {
         
         .search-input_wrap {
            position: relative;
            display: flex;
            width: 90%;
            height: 22px;
            margin: auto;
            padding: 5px 0;
            border-radius: 50px;
            background-color: #f5f5f5;
            text-align: center;
            
            & > * {
               position: absolute;
               top: 0;
               bottom: 0;
            }
            
            .u-icon {
               left: 50%;
               transform: translateX(-100%);
            }
            
            .label {
               right: 50%;
               transform: translateX(100%);
               line-height: 32px;
            }
         }
      }
   }
	
	.body {
		padding: 0;
		box-sizing: border-box;
		
		.swiper-item {
			height: 100%;
		}
	}
</style>
